<template>
  <div>
    <transition :name="transitionName">
      <router-view class="router"></router-view>
    </transition>
    <cube-tab-bar
    v-model="selectedLabelDefault"
    :data="tabs"
    @click="clickHandler"
    @change="changeHandler"
    class="botnav">
  </cube-tab-bar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      transitionName: 'slide-right',
      selectedLabelDefault: '首页',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home'
      }, {
        label: '喜欢',
        icon: 'cubeic-like'
      }, {
        label: '购物车',
        icon: 'cubeic-vip'
      }, {
        label: '个人',
        icon: 'cubeic-person'
      }]
    }
  },
  methods: {
    clickHandler (label) {
      // if you clicked home tab, then print 'Home'
      console.log(label)
    },
    changeHandler (label) {
      switch(label){
        case '首页':
          this.$router.push({path: '/botnav/index'});
          break;
        case '喜欢':
          this.$router.push({path: '/botnav/like'});
          break;
        case '购物车':
          this.$router.push({path: '/botnav/car'});
          break;
        case '个人':
          this.$router.push({path: '/botnav/my'});
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .cube-tab-bar.botnav{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: #ccc;
    
    .cube-tab div{
      font-size: 10px;
      padding: 3px;
    }
    i{
      font-size: 20px;
    }
  }
  .router{
    position: absolute;
    width: 100%;
    transition: all 0.8s ease;
  }
  .slide-left-enter,.slide-right-leave-active{
    opacity: 0;
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0)
  }
  .slide-right-enter,.slide-left-leave-active{
    opacity: 0;
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0)
  }
   
</style>
